<template>
  <div class="home">
    <img src="../../../public/logo.png" alt="" />
    <h1 class="title">荣信鞋业敏捷制造系统</h1>
    <button @click="loginOut">退出系统</button>
    <p>修改密码</p>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Home'
}
</script>
<script lang="ts" setup>
import { useUserInfoStore } from '@/stores/userInfo'
import { useRoute, useRouter } from 'vue-router'
const userInfoStore = useUserInfoStore()
// const echartsStore = useEchartsStore()
const router = useRouter()
const route = useRoute()

// onMounted(() => {
//   echartsStore.getEchartsData()
// })

// 点击退出系统触发函数
const loginOut = async () => {
  await userInfoStore.logout()
  router.push(`/login?redirect=${route.fullPath}`)
}
</script>

<style lang="less" scoped>
.home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* background-color: #ddd; */
  img {
    width: 370px;
    height: 82px;
  }

  .title {
    font-size: 72px;
    margin-top: 41px;
    font-family: Segoe UI-Semibold, Segoe UI;
    font-weight: 600;
    color: #0e0d22;
  }

  button {
    width: 258px;
    height: 46px;
    background: #f89027;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    margin-top: 62px;
    color: white;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    color: #989898;
    margin-top: 20px;
  }
}

.block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
